import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    DeviceEventEmitter,
    ScrollView,
    SectionList,
    ActivityIndicator
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import Loading from "../../utils/Loading";
import Header from "../../components/header";
import { getImgUrl } from '../../utils/ComFunction'
import PriceRangeModal from "../car/stock/PriceRangeModal";
import SortDropdown from "../car/stock/SortDropdown";
import MerchantBaseInfo from "./components/MerchantBaseInfo";
import MerchantAuthInfo from "./components/MerchantAuthInfo";
import AsyncImage from '../../components/image/AsyncImage'
import { CarSaleStatus } from '../../utils/Enum'

const isIos = Platform.OS == 'ios';

let navigation


export default class DutyDetail extends Component {
    constructor(props) {
        super(props);
        let isFranchisee = this.props.route.params && this.props.route.params.isFranchisee ? true : false
        let isLookCarDetail = this.props.route.params && this.props.route.params.isLookCarDetail ? true : false
        let isJoinCar = this.props.route.params && this.props.route.params.isJoinCar ? this.props.route.params.isJoinCar : 0
        this.state = {
            isLookCarDetail,
            merchantId: this.props.route.params.merchantId,
            isSelfCar: this.props.route.params.merchantId == Constant.userInfo.merchantId ? true : false,
            isFranchisee,
            isJoinCar: isJoinCar,
            selectedIndex: 0,

            isShowSortDrop: false,
            sortShowText: '排序',
            orderColumns: [],

            keyword: '',
            filterShowList: [],
            isReported: 0,
            mileageMin: 0,
            mileageMax: 10,
            registerDateBegin: 0,
            registerDateEnd: 8,
            carColor: '',
            carRank: '',
            gearboxType: 0,
            gearboxTypeTitle: '',
            emissionStd: 0,
            emissionStdTitle: '',
            energyType: 0,
            energyTypeTitle: '',


            brand: 0,
            series: 0,

            isPriceModalVisible: false,
            markedPriceMin: 0,
            markedPriceMax: 0,

            data: {},
            showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
            pageNo: 1,
            pageSize: 20,
            carSections: [{
                'key': 'baseInfo',
                'data': [
                    { "cell": "merchantInfo" }, //商家信息
                ]
            }, {
                'key': 'contentInfo',
                'data': []
            }],
            merchantSections: [{
                'key': 'baseInfo',
                'data': [
                    { "cell": "merchantInfo" }, //商家信息
                ]
            }, {
                'key': 'contentInfo',
                'data': [
                    { "cell": "merchantBaseInfo" }, //基本信息,
                    { "cell": "merchantIntroduceInfo" }, //商家介绍
                    { "cell": "merchantAuthInfo" }, //信息认证
                ]
            }],

            totalCarNum: 0,

            // 新加的多选条件
            carColorList: [],
            carColorListPr: [],
            carRankList: [],
            carRankListPr: [],
            gearboxTypeList: [],
            gearboxTypeListPr: [],
            emissionStdList: [],
            emissionStdListPr: [],
            energyTypeList: [],
            energyTypeListPr: [],
        }
    }

    componentWillUnmount() {
        if (this.commonEvent) {
            this.commonEvent.remove();
        }
        if (this.selectBrandResult) {
            this.selectBrandResult.remove();
        }
    }

    componentDidMount() {
        this.commonEvent = DeviceEventEmitter.addListener('commonEvent', (data) => {
            console.log('commonEvent', data);
            if (data.type == 'moreFilter' && data.fromPage == 'CompanyDetailPage') {

                this.addAllFilterShow(data)

                this.refreshCarList()
            }
        })
        this.selectBrandResult = DeviceEventEmitter.addListener('selectBrandResult', (result) => {
            if (result && result.from == 'CompanyDetailPage') {
                this.formatBrand(result)
            }
        })

        this.getMerchantInformation()
        this.getCarList()
    }

    getMerchantInformation() {
        this.Loading.show()
        HttpUtils.getRequest(HttpUrls.getMerchantInformation, { merchantId: this.state.merchantId })
            .then((result) => {
                this.Loading.hide()
                if (result.code == 0) {
                    this.setState({
                        data: result.data,
                        selectedIndex: 0,
                    })
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} hideSepLine={true} Title={'商家主页'} ></Header>

                {
                    this.state.data ?
                        <SectionList
                            // ref={(sectionList) => { this.sectionList = sectionList }}
                            renderSectionHeader={this.renderSectionHeader}
                            stickySectionHeadersEnabled={true}
                            style={{ flex: 1 }}
                            sections={this.state.selectedIndex == 0 ? this.state.carSections : this.state.merchantSections}
                            renderItem={this.renderItem.bind(this)}
                            onEndReachedThreshold={0.1}
                            onEndReached={() => this.reachedEnd()}
                            ListFooterComponent={() => this.renderFooter()}
                            showsHorizontalScrollIndicator={false}
                            keyExtractor={this._extraUniqueKey}
                        />
                        :
                        null
                }

                <Loading onRef={(ref) => (this.Loading = ref)} />

                <SortDropdown
                    onSelect={(result) => {
                        console.log(result);
                        this.setState({
                            isShowSortDrop: false,
                            orderColumns: result.value,
                            sortShowText: result.title == '默认排序' ? '排序' : result.title
                        }, function () {
                            this.refreshCarList()
                        })
                    }}
                    visible={this.state.isShowSortDrop}
                    onClose={() => {
                        this.setState({
                            isShowSortDrop: false
                        })
                    }}>

                </SortDropdown>

                <PriceRangeModal
                    visible={this.state.isPriceModalVisible}
                    onClose={() => this.setIsPriceModalVisible(false)}
                    onConfirm={(min, max, priceTitle) => this.setPriceRange(min, max, priceTitle)}
                    markedPriceMin={this.state.markedPriceMin}
                    markedPriceMax={this.state.markedPriceMax}>

                </PriceRangeModal>

            </View>
        )
    }

    _extraUniqueKey(item, index) {
        return "index" + index + item;
    }

    renderItem(data) {
        if (data.item.cell == 'merchantInfo') {
            return (
                <View>
                    {this.renderMerchantInfomation()}
                </View>
            )
        } else if (data.item.cell == 'merchantBaseInfo' && this.state.selectedIndex == 1) {
            return (
                <MerchantBaseInfo
                    data={this.state.data}
                />
            )
        } else if (data.item.cell == 'merchantIntroduceInfo' && this.state.selectedIndex == 1) {
            return (
                <View style={{ flexDirection: 'column', width: '100%', paddingHorizontal: 16, paddingVertical: 20, backgroundColor: '#fff', borderBlockColor: '#e4e4e4', borderBottomWidth: 0.3 }}>
                    <Text style={{ fontSize: 16, fontWeight: '500', color: '#333', marginBottom: 15 }}>商家介绍</Text>
                    <Text style={{ fontSize: 14, color: '#333', lineHeight: 18 }}>{this.state.data.merchantProfile}</Text>
                </View>
            )
        } else if (data.item.cell == 'merchantAuthInfo' && this.state.selectedIndex == 1) {
            return (
                <MerchantAuthInfo
                    storePic={this.state.data.storePic}
                    licensePic={this.state.data.licensePic}
                />
            )
        } else {
            if (this.state.selectedIndex == 0) {
                if (data.item.emptyCell) {
                    return (
                        <View style={{ width: '100%', height: 260 }}>
                            <NoData Desc="暂无数据" style={{ marginTop: gREM(40) }} />
                        </View>
                    )
                } else {
                    return (
                        <View style={{ width: '100%', paddingHorizontal: 15 }}>
                            {this.renderCarItem(data.item)}
                        </View>
                    )
                }
            } else {
                return (
                    null
                )
            }
        }
    }

    renderCarItem(item) {
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                style={styles.carBox}
                onPress={() => {
                    if (this.state.isLookCarDetail || !this.state.isFranchisee) {
                        this.props.navigation.navigate('CarDetailPage', {
                            carId: item.carId,
                            saleStatus: item.saleStatus,
                            merchantId: this.state.merchantId,
                            isJoinCar: this.state.isJoinCar,
                            carDetailCallBack: () => {
                                this.refreshCarList()
                            }
                        })
                    } else {
                        this.props.navigation.navigate('CarOfferPriceDetailPage', {
                            carId: item.carId,
                            saleStatus: item.saleStatus,
                            merchantId: this.state.merchantId,
                            isJoinCar: this.state.isJoinCar,
                            carDetailCallBack: () => {
                                this.refreshCarList()
                            }
                        })
                    }
                }}
            >
                {
                    this.state.data.isMarginMerchant ?
                        <Image style={styles.depositImg} source={require('source/image/car_list_deposit.png')} />
                        :
                        null
                }
                <View style={{ flexDirection: 'row', alignItems: 'center', width: '100%', height: 90, paddingHorizontal: 12 }}>
                    {
                        !this.state.isSelfCar ?
                            <View style={styles.labelBox}>
                                {
                                    item.detectionStatus == 3 ?
                                        <Image style={{ width: 59, height: 18, marginRight: 4 }} source={require('source/image/detection_auth.png')} />
                                        :
                                        null
                                }

                                {
                                    item.isReported == 1 ?
                                        <View style={[styles.labelItemBox, { backgroundColor: '#FFF5E6' }]}>
                                            <Text style={[styles.labelText, { color: '#F99802' }]}>有维保</Text>
                                        </View>
                                        :
                                        null
                                }

                                {
                                    item.saleStatus == CarSaleStatus.CarSaleStatusReserved ?
                                        <View style={[styles.labelItemBox, { backgroundColor: '#F1FAED' }]}>
                                            <Text style={[styles.labelText, { color: '#6ECC49' }]}>已预订</Text>
                                        </View>
                                        :
                                        null
                                }
                            </View>
                            :
                            null
                    }

                    <AsyncImage
                        source={{ uri: getImgUrl(item.mainPic) }}
                        defaultSource={require('source/image/icon_car_default.png')}
                        style={styles.carImg}
                        resizeMode="cover"
                    />
                    <View style={{ flexDirection: 'column', justifyContent: 'space-between', paddingVertical: 6, height: '100%', alignItems: 'flex-start', marginLeft: 10, flex: 1 }}>
                        <Text style={styles.brandText}>{item.seriesName + ' ' + item.speciesName}</Text>
                        <Text style={styles.dateText}>{(item.registerDate ? item.registerDate + ' | ' : '') + (item.mileage ? (item.mileage / 10000).toFixed(2) + '万公里' : '')}</Text>
                        {this.state.isFranchisee ?
                            this.state.isJoinCar == 0 ?
                                <Text style={styles.priceText}>{'挂牌价：' + (item.listPrice ? (item.listPrice / 10000).toFixed(2) : '未定价')}</Text>
                                :
                                <Text style={styles.priceText}>{('展厅价：') + (item.markedPrice ? (item.markedPrice / 10000).toFixed(2) + '万元' : '未定价')}</Text>
                            :
                            <Text style={styles.priceText}>{('一口价：') + (item.markedPrice ? (item.markedPrice / 10000).toFixed(2) + '万元' : '未定价')}</Text>
                        }

                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    renderSectionHeader = (info) => {
        let section = info.section.key;
        if (section === 'contentInfo') {
            return (
                <View style={{ flexDirection: 'column', width: '100%' }}>
                    <View style={styles.tabBox}>
                        <TouchableOpacity
                            style={styles.tabBoxItem}
                            activeOpacity={0.8}
                            onPress={() => {
                                this.setState({
                                    selectedIndex: 0,
                                })
                            }}
                        >
                            <Text style={this.state.selectedIndex == 0 ? styles.tabTitleTextSel : styles.tabTitleText}>{(this.state.totalCarNum != 0 ? this.state.totalCarNum + '台' : '') + '在售'}</Text>
                            <View style={this.state.selectedIndex == 0 ? styles.tabIndexSelBox : styles.tabIndexBox} />
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={styles.tabBoxItem}
                            activeOpacity={0.8}
                            onPress={() => {
                                this.setState({
                                    selectedIndex: 1,
                                })
                            }}
                        >
                            <Text style={this.state.selectedIndex == 1 ? styles.tabTitleTextSel : styles.tabTitleText}>{'商家信息'}</Text>
                            <View style={this.state.selectedIndex == 1 ? styles.tabIndexSelBox : styles.tabIndexBox} />
                        </TouchableOpacity>
                    </View>
                    {
                        this.state.selectedIndex == 0 ?
                            this.renderFilterView()
                            :
                            null
                    }
                    {
                        this.state.filterShowList && this.state.selectedIndex == 0 ?
                            this.renderFilterShow()
                            :
                            null
                    }
                </View>

            )
        }
    }

    renderFilterView() {
        return (
            <View style={styles.filterBox}>
                <TouchableOpacity
                    style={styles.filterItem}
                    activeOpacity={0.8}
                    onPress={() => {
                        let params = { selectLevel: 2, from: 'CompanyDetailPage' }
                        AndroidModule.selectBrand(params, (error, result) => {
                            console.log('result = ', result)
                            this.formatBrand(result)
                        })
                    }}
                >
                    <Text style={styles.filterText}>{'品牌'}</Text>
                    <Image source={require('source/image/comm/down_small_gray.png')} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.filterItem}
                    activeOpacity={0.8}
                    onPress={() => {
                        this.setState({
                            isPriceModalVisible: true
                        })
                    }}
                >
                    <Text style={styles.filterText}>{'价格'}</Text>
                    <Image source={require('source/image/comm/down_small_gray.png')} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.filterItem}
                    activeOpacity={0.8}
                    onPress={() => {
                        this.setState({
                            isShowSortDrop: true
                        })
                    }}
                >
                    <Text style={styles.filterText}>{this.state.sortShowText}</Text>
                    <Image source={require('source/image/comm/down_small_gray.png')} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.filterItem}
                    activeOpacity={0.8}
                    onPress={() => {
                        navigation.navigate('MoreFilterPage', {
                            fromPage: 'CompanyDetailPage',
                            isReported: this.state.isReported,
                            mileageMin: this.state.mileageMin,
                            mileageMax: this.state.mileageMax,
                            registerDateBegin: this.state.registerDateBegin,
                            registerDateEnd: this.state.registerDateEnd,

                            carColorList: this.state.carColorList,
                            carRankList: this.state.carRankList,
                            gearboxTypeList: this.state.gearboxTypeList,
                            emissionStdList: this.state.emissionStdList,
                            energyTypeList: this.state.energyTypeList,
                        })
                    }}
                >
                    <Text style={styles.filterText}>{'更多'}</Text>
                    <Image source={require('source/image/comm/down_small_gray.png')} />
                </TouchableOpacity>
            </View>
        )
    }

    renderFilterShow() {
        return (
            <View style={styles.filterShowContain}>
                {this.state.filterShowList.map((item, index) => {
                    if (item.key == 'clear') {
                        return (
                            <TouchableOpacity
                                key={index}
                                style={styles.filterShowItem}
                                onPress={() => {
                                    this.clearFilterShow()

                                }}>
                                <Image style={styles.filterShowClearImg} source={require('source/image/comm/btn_clear_history.png')}></Image>
                                <Text style={styles.filterShowText}>清空</Text>

                            </TouchableOpacity>
                        )
                    } else {
                        return (
                            <TouchableOpacity
                                key={index}
                                style={styles.filterShowItem}
                                onPress={() => {
                                    this.removeFilterShow(item, index)

                                }}>
                                <Text style={styles.filterShowText}>{item.title}</Text>
                                <Image style={styles.filterShowCloseImg} source={require('source/image/comm/icon_close.png')}></Image>
                            </TouchableOpacity>
                        )
                    }

                })
                }
            </View>
        )
    }

    formatBrand(result) {
        if (result.brandId == 0 || !result || Object.keys(result).length == 0) {
            this.removeBrand()
        } else {
            let brandObj = {
                title: result.brandName,
                key: 'brand',
                value: result.brandId
            }
            this.addFilter(brandObj)

            if (result.seriesId == 0 || !result.seriesId) {
                this.removeSeriesBrand()
            } else {
                let seriesObj = {
                    title: result.seriesName,
                    key: 'series',
                    value: result.seriesId
                }
                this.addFilter(seriesObj)
            }

        }
        this.setState({
            brand: result.brandId,
            series: result.seriesId,
        }, function () {
            this.refreshCarList()
        })
    }

    addFilter(filterModel) {
        let filterShowList = this.state.filterShowList
        let clear = {
            key: 'clear',
        }
        if (filterShowList.length == 0) {
            filterShowList.push(filterModel)
            filterShowList.push(clear)

        } else {
            let isExist = false
            for (let i = 0; i < filterShowList.length; i++) {
                if (filterShowList[i].key == filterModel.key) {
                    isExist = true
                    filterShowList[i] = filterModel
                }
            }

            if (isExist) {

            } else {
                filterShowList.splice(filterShowList.length - 2, 0, filterModel);
                // filterShowList.push(filterModel)
            }
        }
        console.log('filterShowList', filterShowList)
        this.setState({
            filterShowList: filterShowList
        })
    }

    removeFilterShow(item, index) {
        let filterShowList = this.state.filterShowList
        let temp = []
        for (let i = 0; i < filterShowList.length; i++) {
            if (i != index) {
                temp.push(filterShowList[i])
            }
        }

        if (item.key == 'keyword') {
            this.setState({
                keyword: ''
            })
        }
        else if (item.key == 'isReported') {
            this.setState({
                isReported: 0
            })
        }
        else if (item.key == 'mileage') {
            this.setState({
                mileageMin: 0,
                mileageMax: 10
            })
        }
        else if (item.key == 'carAge') {
            this.setState({
                registerDateBegin: 0,
                registerDateEnd: 8
            })
        }
        else if(item.key == 'carColorList'){
            this.state.carColorList.map((color, index)=>{
                if(item.value == color){
                    this.state.carColorList.splice(index,1)
                }
            })
        }else if(item.key == 'carRankList'){
            this.state.carRankList.map((Rank, index)=>{
                if(item.value == Rank){
                    this.state.carRankList.splice(index,1)
                }
            })
        }else if(item.key == 'gearboxTypeList'){
            this.state.gearboxTypeList.map((gearbox, index)=>{
                if(item.value == gearbox){
                    this.state.gearboxTypeList.splice(index,1)
                }
            })
        }else if(item.key == 'emissionStdList'){
            this.state.emissionStdList.map((emission, index)=>{
                if(item.value == emission){
                    this.state.emissionStdList.splice(index,1)
                }
            })
        }else if(item.key == 'energyTypeList'){
            this.state.energyTypeList.map((energy, index)=>{
                if(item.value == energy){
                    this.state.energyTypeList.splice(index,1)
                }
            })
        }
        else if (item.key == 'brand') {
            this.setState({
                brand: 0
            })
        } else if (item.key == 'series') {
            this.setState({
                series: 0
            })
        } else if (item.key == 'price') {
            this.setState({
                markedPriceMin: 0,
                markedPriceMax: 0
            })
        } else if (item.key == 'date') {
            this.setState({
                tradeDateBegin: '',
                tradeDateEnd: '',
                tradeDateText: ''
            })
        } else if (item.key == 'sellerUserId') {
            this.setState({
                sellerUserId: ''
            })
        }

        if (temp.length == 1) {
            temp = []
        }

        this.setState({
            filterShowList: temp
        }, function () {
            this.refreshCarList()
        })
    }

    clearFilterShow() {
        this.setState({
            keyword: '',
            filterShowList: [],
            isReported: 0,
            mileageMin: 0,
            mileageMax: 10,
            markedPriceMin: 0,
            markedPriceMax: 0,
            registerDateBegin: 0,
            registerDateEnd: 8,

            brand: 0,
            series: 0,

            // 多选
            carColorList: [],
            carRankList: [],
            gearboxTypeList: [],
            emissionStdList: [],
            energyTypeList: [],
        }, function () {
            this.refreshCarList()
        })
    }

    removeBrand() {
        let temp = []
        for (let i = 0; i < this.state.filterShowList.length; i++) {
            if (this.state.filterShowList[i].key != 'brand' && this.state.filterShowList[i].key != 'series') {
                temp.push(this.state.filterShowList[i])

            }
        }

        if (temp.length == 1) {
            temp = []
        }

        this.setState({
            filterShowList: temp
        })
    }

    removeSeriesBrand() {
        let temp = []
        for (let i = 0; i < this.state.filterShowList.length; i++) {
            if (this.state.filterShowList[i].key != 'series') {
                temp.push(this.state.filterShowList[i])
            }
        }

        if (temp.length == 1) {
            temp = []
        }

        this.setState({
            filterShowList: temp
        })
    }

    renderFooter() {
        if (this.state.carSections[1].data.length == 0) {
            return (
                null
            )
        }
        if (this.state.selectedIndex == 1) {
            return (
                <View style={{ height: Constant.bottomHeight }} />
            );
        }

        if (this.state.showFoot == 2) {
            return (
                <View style={{ padding: 10, backgroundColor: '#ffffff', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                    <ActivityIndicator size="small" color="#333333" />
                    <Text style={{ marginLeft: 10, fontSize: 15, color: '#333333' }}>加载中...</Text>
                </View>
            )
        } else {
            return (
                <View style={{ height: Constant.bottomHeight }} />
            )
        }
    }

    reachedEnd() {
        if (this.state.selectedIndex == 0 && this.state.carSections[1].data.length == 0) {
            return null;
        }

        if (this.state.showFoot != 0) {
            return null;
        }
        let pageNo = this.state.pageNo + 1
        this.setState({
            showFoot: 2,
            pageNo: pageNo
        }, function () {
            this.getCarList()
        });

    }

    refreshCarList() {
        this.setState({
            pageNo: 1,
            carSections: [{
                'key': 'baseInfo',
                'data': [
                    { "cell": "merchantInfo" }, //商家信息
                ]
            }, {
                'key': 'contentInfo',
                'data': []
            }]
        }, function () {
            this.getCarList()
        })
    }

    getCarList() {
        let params = {
            merchantId: this.state.merchantId,
            orderColumns: [{ "orderAsc": false, "column": "purchaseDate" }],
            pageNo: this.state.pageNo,
            pageSize: this.state.pageSize,
            searchChannel: "app_one_merchant_car",
        }

        if (this.state.isFranchisee) {
            params['joinQuotationCenter'] = 1
        }

        if (this.state.brand != 0) {
            params['brand'] = this.state.brand
        }

        if (this.state.series != 0) {
            params['series'] = this.state.series
        }

        if (this.state.markedPriceMin != 0) {
            params['markedPriceMin'] = this.state.markedPriceMin * 10000
        }

        if (this.state.markedPriceMax != 0) {
            params['markedPriceMax'] = this.state.markedPriceMax * 10000
        }

        if (this.state.orderColumns.length > 0) {
            params['orderColumns'] = this.state.orderColumns
        }

        if (this.state.isReported != 0) {
            params['isReported'] = this.state.isReported
        }

        if (this.state.mileageMin != 0) {
            params['mileageMin'] = this.state.mileageMin * 10000
        }
        if (this.state.mileageMax != 10) {
            params['mileageMax'] = this.state.mileageMax * 10000
        }

        let nowDate = new Date()
        let nowYear = nowDate.getFullYear()
        let nowMonth = nowDate.getMonth() + 1
        let nowDay = nowDate.getDate()
        if (this.state.registerDateBegin != 0) {
            let beginDate = (nowYear - this.state.registerDateBegin) + '-' + nowMonth + '-' + nowDay
            params['registerDateEnd'] = beginDate
        }
        if (this.state.registerDateEnd != 8) {
            let endDate = (nowYear - this.state.registerDateEnd) + '-' + nowMonth + '-' + nowDay
            params['registerDateBegin'] = endDate
        }

        // 外观颜色
        if(this.state.carColorList && this.state.carColorList.length > 0){
            params['carColorList'] = this.state.carColorList
        }
        // 车型级别
        if(this.state.carRankList && this.state.carRankList.length > 0){
            params['carRankList'] = this.state.carRankList
        }
        // 变速箱
        if(this.state.gearboxTypeList && this.state.gearboxTypeList.length > 0){
            params['gearboxTypeList'] = this.state.gearboxTypeList
        }
        // 排放标准
        if(this.state.emissionStdList && this.state.emissionStdList.length > 0){
            params['emissionStdList'] = this.state.emissionStdList
        }
        // 能源类型
        if(this.state.energyTypeList && this.state.energyTypeList.length > 0){
            params['energyTypeList'] = this.state.energyTypeList
        }

        HttpUtils.postRequest(HttpUrls.searchCars, params)
            .then((result) => {

                if (result.data) {
                    this.setState({
                        totalCarNum: result.data.totalSize
                    })
                }
                if (result.data && result.data.resultList.length > 0) {
                    let carsList = this.state.carSections[1].data
                    carsList = carsList.concat(result.data.resultList)
                    this.setState({
                        carSections: [{
                            'key': 'baseInfo',
                            'data': [
                                { "cell": "merchantInfo" }, //商家信息
                            ]
                        }, {
                            'key': 'contentInfo',
                            'data': carsList
                        }]
                    })
                    if (result.data.resultList.length < this.state.pageSize) {
                        this.setState({
                            showFoot: 1
                        });
                    } else {
                        this.setState({
                            showFoot: 0
                        });
                    }
                } else {
                    if (this.state.pageNo == 1) {
                        this.setState({
                            carSections: [{
                                'key': 'baseInfo',
                                'data': [
                                    { "cell": "merchantInfo" }, //商家信息
                                ]
                            }, {
                                'key': 'contentInfo',
                                'data': [
                                    { 'emptyCell': true }
                                ]
                            }]
                        })
                    }
                    this.setState({
                        showFoot: 1
                    });
                }
            })
            .catch((error) => {

            });
    }

    renderMerchantInfomation() {
        return (
            <View style={styles.merchantContainer}>
                <AsyncImage style={styles.merchantImg} source={{ uri: getImgUrl(this.state.data.merchantLogoPic) }} defaultSource={require('source/image/comm/sc_default.png')} />
                <View style={styles.merchantInfo}>
                    <Text style={styles.companyText}>{this.state.data.merchantAbbreviation ? this.state.data.merchantAbbreviation : (this.state.data.merchantName ? this.state.data.merchantName : '暂未填写商家名称')}</Text>
                    {
                        (this.state.data.isScBrand + '' == '1' || this.state.data.authenCode + '' != '' || this.state.data.isMarginMerchant + '' == '1') ?
                            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 8 }}>
                                {
                                    this.state.data.isMarginMerchant + '' == '1' ?
                                        <Image style={{ width: 50, height: 16, marginRight: 10 }} source={require('source/image/deposit_icon.png')} />
                                        :
                                        null
                                }
                                {
                                    this.state.data.isScBrand + '' == '1' ?
                                        <Image style={{ width: 50, height: 16, marginRight: 10 }} source={require('source/image/brand_icon.png')} />
                                        :
                                        null
                                }
                                {
                                    this.state.data.authenCode + '' != '' ?
                                        <Image style={{ width: 60, height: 16, marginRight: 10 }} source={require('source/image/auth_icon.png')} />
                                        :
                                        null
                                }
                            </View>
                            :
                            null
                    }
                    <TouchableOpacity
                        activeOpacity={1.0}
                        style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}
                        onPress={() => {
                            this.location()
                        }}
                    >
                        <Image source={require('source/image/icon_merchant_location.png')} />
                        <Text style={styles.addressText}>
                            {(this.state.data.provinceName ? this.state.data.provinceName : '') + (this.state.data.cityName ? this.state.data.cityName : '') + (this.state.data.districtName ? this.state.data.districtName : '') + (this.state.data.address ? this.state.data.address : '')}
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }


    renderMerchantInfo() {
        return (
            <View style={{ width: '100%', backgroundColor: '#fff' }}>
            </View>
        )
    }

    location() {
        let params = {
            lat: this.state.data.lat,
            lon: this.state.data.lon
        }
        AndroidModule.selectMap(params, (error, result) => {

        })
    }

    setIsPriceModalVisible(visible) {
        this.setState({
            isPriceModalVisible: visible
        })
    }

    setPriceRange(min, max, priceTitle) {
        this.setState({
            markedPriceMin: min,
            markedPriceMax: max
        })

        let priceObj = {
            title: priceTitle,
            key: 'price',
            value: 0
        }
        this.addFilter(priceObj)

        this.refreshCarList()
    }

    addAllFilterShow(data) {
        let tempList = []
        let resultList = []
        let isReported = data.isReported

        if (isReported == 1) {
            tempList.push({
                title: '有维保',
                key: 'isReported',
                value: 1
            })
        }


        // 颜色
        if(data.carColorList && data.carColorList.length > 0){
            data.carColorList.map((item, index) => {
                let tempListItem = {
                    title: item,
                    key: 'carColorList',
                    value: item
                }
                tempList.push(tempListItem)
            })
        }
        // 车型级别
        if(data.carRankList && data.carRankList.length > 0){
            data.carRankList.map((item, index) => {
                data.carRankListPr.map( rankItem => {
                    if(rankItem.id == item){
                        let tempListItem = {
                            title: rankItem.title,
                            key: 'carRankList',
                            value: item
                        }
                        tempList.push(tempListItem)
                    }
                })
            })
        }
        // 变速箱
        if(data.gearboxTypeList && data.gearboxTypeList.length > 0){
            data.gearboxTypeList.map((item, index) => {
                data.gearboxTypeListPr.map(gItem => {
                    if(gItem.id == item){
                        let tempListItem = {
                            title: gItem.title,
                            key: 'gearboxTypeList',
                            value: item
                        }
                        tempList.push(tempListItem)
                    }
                })
            })
        }
        // 排放标准
        if(data.emissionStdList && data.emissionStdList.length > 0){
            data.emissionStdList.map((item, index) => {
                data.emissionStdListPr.map(gItem => {
                    if(gItem.id == item){
                        let tempListItem = {
                            title: gItem.title,
                            key: 'emissionStdList',
                            value: item
                        }
                        tempList.push(tempListItem)
                    }
                })
            })
        }
        // 燃油类型
        if(data.energyTypeList && data.energyTypeList.length > 0){
            data.energyTypeList.map((item, index) => {
                data.energyTypeListPr.map(rItem => {
                    if(rItem.id == item){
                        let tempListItem = {
                            title: rItem.title,
                            key: 'energyTypeList',
                            value: item
                        }
                        tempList.push(tempListItem)
                    }
                })
            })
        }

        let mileShowText = data.mileShowText
        let mileageMin = data.mileageMin
        let mileageMax = data.mileageMax

        if (mileShowText === '不限') {

        } else {
            tempList.push({
                title: mileShowText,
                key: 'mileage',
                value: 0
            })
        }

        let ageShowText = data.ageShowText
        let registerDateBegin = data.registerDateBegin
        let registerDateEnd = data.registerDateEnd

        if (ageShowText === '不限') {

        } else {
            tempList.push({
                title: ageShowText,
                key: 'carAge',
                value: 0
            })
        }

        let filterShowList = this.state.filterShowList
        if (filterShowList.length == 0) {
            resultList = tempList
        } else {
            let temp = [];
            for (let i = 0; i < filterShowList.length; i++) {
                if (filterShowList[i].key == 'keyword' || filterShowList[i].key == 'brand') {
                    temp.push(filterShowList[i])

                }
            }
            resultList = temp.concat(tempList)

        }

        resultList.push({ key: 'clear' })

        this.setState({
            isReported: isReported,
            filterShowList: resultList,
            mileageMin: mileageMin,
            mileageMax: mileageMax,
            registerDateBegin: registerDateBegin,
            registerDateEnd: registerDateEnd,

            carColorList: data.carColorList,
            carColorListPr: data.carRankListPr,
            carRankList: data.carRankList,
            carRankListPr: data.carRankListPr,
            gearboxTypeList: data.gearboxTypeList,
            gearboxTypeListPr: data.gearboxTypeListPr,
            emissionStdList: data.emissionStdList,
            emissionStdListPr: data.emissionStdListPr,
            energyTypeList: data.energyTypeList,
            energyTypeListPr: data.energyTypeListPr,

        })
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    merchantContainer: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 15,
        paddingHorizontal: 16,
        backgroundColor: '#FFF'
    },
    depositImg: {
        marginTop: 12,
        marginLeft: 12,
        width: 40,
        height: 15,
        position: 'absolute',
        zIndex: 100,

    },
    merchantImg: {
        width: 54,
        height: 54,
        borderRadius: 27,
    },
    merchantInfo: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        marginLeft: 15,
    },
    companyText: {
        fontSize: 16,
        color: '#333',
        fontWeight: '500',
    },
    addressText: {
        flex: 1,
        lineHeight: 17,
        marginLeft: 5,
        fontSize: 12,
        color: '#666',
        marginTop: 8,
    },
    tabBox: {
        width: '100%',
        height: 40,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 16,
        backgroundColor: '#FFF',
        borderTopColor: '#e4e4e4',
        borderTopWidth: 0.3
    },
    tabBoxItem: {
        flex: 1,
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabTitleTextSel: {
        color: '#333',
        fontSize: 14,
        fontWeight: '500'
    },
    tabTitleText: {
        color: '#999',
        fontSize: 14,
    },
    tabIndexBox: {
        width: 26,
        height: 3,
        backgroundColor: '#fff'
    },
    tabIndexSelBox: {
        position: 'absolute',
        bottom: 0,
        width: 26,
        height: 3,
        backgroundColor: '#FFE000'
    },
    filterBox: {
        width: '100%',
        height: 40,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#FFF',
        borderTopColor: '#e4e4e4',
        borderTopWidth: 0.3
    },
    filterItem: {
        flex: 1,
        height: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    filterText: {
        fontSize: 14,
        color: '#333',
    },

    filterShowContain: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: '#fff',
        paddingHorizontal: 15
    },
    filterShowItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height: 30,
        backgroundColor: '#f6f6f6',
        borderRadius: 4,
        paddingHorizontal: 10,
        marginRight: 10,
        marginBottom: 5
    },
    filterShowText: {
        fontSize: 12,
        color: '#696969'
    },
    filterShowCloseImg: {
        width: 12,
        height: 12,
        marginLeft: 2
    },
    filterShowClearImg: {
        width: 15,
        height: 15,
        marginRight: 2,
        resizeMode: 'contain'
    },

    carBox: {
        marginTop: 10,
        backgroundColor: '#fff',
        width: '100%',
        paddingVertical: 12,
        borderRadius: 4,
        flexDirection: 'column'
    },
    carImg: {
        backgroundColor: '#f5f5f5',
        width: 130,
        height: 90,
        borderRadius: 4,
    },
    brandText: {
        fontSize: 14,
        color: '#333',
    },
    dateText: {
        fontSize: 12,
        color: '#999',
    },
    priceText: {
        fontSize: 14,
        color: '#ED542E'
    },

    labelBox: {
        zIndex: 1000,
        position: 'absolute',
        left: 16,
        top: 6,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    labelItemBox: {
        marginRight: 4,
        paddingHorizontal: 6,
        height: 18,
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 2,
        backgroundColor: '#F4F4F4'
    },
    labelText: {
        fontSize: 10,
        color: '#FF7B00'
    },
})